<template>
  <div v-loading="loading" class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card style="height: 500px">
          <div slot="header" class="clearfix">
            临时固定方案：
            <p style="color:#F56C6C;font-size: 0.8rem;line-height: 20px">
              <i class="el-icon-info" /> &nbsp;&nbsp;此方案主要应用于突发事件下，固定时间范围内统一使用的主题颜色。设置后会自动替换用户指定主题方案以及系统默认方案,
              超时时间范围后，自动恢复为用户指定主题方案或者系统默认方案
            </p>
          </div>
          <el-row :gutter="20">
            <el-col v-for="(item,index) in dataList" :key="index" :span="24" style="margin-top: 10px">
              <el-card class="custom-body">
                <div class="custom-el-li">
                  <div class="custom-title">
                    <div class="custom-title-bt">{{ item.title }}</div>
                    <div class="custom-title-rq">状态：{{ item.zt === true ? '启用': '禁用' }}</div>
                  </div>
                  <div class="custom-button" @click="doFirstEdit(item)"><i class="el-icon-edit" /></div>
                  <div class="custom-button" @click="doFirstDelete(item)"><i class="el-icon-delete" /></div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24" style="margin-top: 10px">
              <el-card class="custom-body">
                <div class="custom-el-li-a" style="font-size: 30px" @click="doAddFirst">
                  <i class="el-icon-plus" />
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card style="height: 500px">
          <div slot="header" class="clearfix">
            系统默认方案：
            <p style="color:#F56C6C;font-size: 0.8rem;line-height: 20px">
              <i class="el-icon-info" /> &nbsp;&nbsp;管理员为定制的系统默认方案，系统默认方案可以设置主题切换方式。切换规则支持按日周期切换（上午、下午、晚上或者时间段的规则切换）、
              月周期切换（从1号到xx号）、年周期切换（如按照季度的方式切换）
            </p>
          </div>
          <el-row :gutter="20">
            <el-col v-for="(item,index) in otherList" :key="index" :span="24" style="margin-top: 10px">
              <el-card class="custom-body">
                <div class="custom-el-li">
                  <div class="custom-title">
                    <div class="custom-title-bt">{{ item.title }}</div>
                    <div class="custom-title-rq">状态：{{ item.zt === true ? '启用': '禁用' }}</div>
                  </div>
                  <div class="custom-button" @click="doThirdEdit(item)"><i class="el-icon-edit" /></div>
                  <div class="custom-button" @click="doFirstDelete(item)"><i class="el-icon-delete" /></div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24" style="margin-top: 10px">
              <el-card class="custom-body">
                <div class="custom-el-li-a" style="font-size: 30px" @click="doAddThirst">
                  <i class="el-icon-plus" />
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <first-entity ref="FirstEntity" @fetch-data="initFirst" />
    <third-entity ref="ThirdEntity" @fetch-data="initThird" />
  </div>
</template>

<script>
import FirstEntity from './entity/index.vue';
import ThirdEntity from './entity/entity.vue';
import { queryAllPlan, delObject } from '@/api/system/theme/plan';
export default {
  name: 'PlanIndex',
  components: { FirstEntity, ThirdEntity },
  data() {
    return {
      loading: false,
      dataList: [],
      rowId: [],
      otherList: []
    };
  },
  created() {
    this.initFirst();
    this.initThird();
  },
  methods: {
    doAddFirst() {
      this.$refs.FirstEntity.init();
    },
    doAddThirst() {
      this.$refs.ThirdEntity.init();
    },
    doFirstEdit(data) {
      this.$refs.FirstEntity.init(data);
    },
    doThirdEdit(data) {
      this.$refs.ThirdEntity.init(data);
    },
    doFirstDelete(data) {
      if (data.id !== null && undefined !== data.id) { // 单个删除
        this.rowId = [];
        this.rowId.push(data.id);
        this.$confirm('此操作将永久删除' + data.title + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delObject(this.rowId).then(res => {
            this.$message.success('删除成功！');
            this.initFirst();
            this.initThird();
            this.rowId = [];
          }).catch(() => {
            this.$message.error('删除失败！');
          });
        }).catch(() => {
          this.$message.success('取消删除成功！');
        });
      }
    },
    initFirst() {
      queryAllPlan({ type: 1 }).then(res => {
        const { data } = res;
        this.dataList = data.data;
      }).catch(() => {
        this.dataList = [];
      });
    },
    initThird() {
      queryAllPlan({ type: 2 }).then(res => {
        const { data } = res;
        this.otherList = data.data;
      }).catch(() => {
        this.otherList = [];
      });
    }
  }
};
</script>

<style scoped>
.clearfix {
  color: #E6A23C;
}
.custom-el-li-a {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
}
.custom-el-li-a:hover {
  background-color: #0a84ff;
  color: #ffffff;
}
.custom-el-li {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
}
.custom-title {
  flex: 1 1 auto;
  height: 80px;
  line-height: 60px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px;
  box-sizing: border-box;
}
.custom-title-bt {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.custom-title-rq {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 0.8rem;
}
.custom-button {
  flex: 0 1 auto;
  width: 80px;
  height: 80px;
  line-height: 60px;
  text-align: center;
  font-size: 1.5rem;
  color: #0a84ff;
}
.custom-button:hover {
  background-color: #0a84ff;
  color: #ffffff;
}
.custom-body.el-card ::v-deep .el-card__body {
  padding: 0px;
}
</style>
